<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragment :: header('图片压缩')" />
</head>
<body>
    <div class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">选择方式</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-danger" id="phantom">
                    百度截图
                </button>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">通过phantom生成图片</label>
            <div class="layui-input-block" id="img1">

            </div>
        </div>
    </div>
    <th:block th:include="fragment :: footer" />
    <script>
        $(function (){
            $("#phantom").click(function (){
                $.ajax({
                    url: ctx + "html2img/printByPhantom",
                    type: "post",
                    dataType: "json",
                    beforeSend: function () {
                        layer.load();
                    },
                    complete: function() {
                        layer.closeAll('loading');
                    },
                    success: function(result) {
                        if (result.code == 0) {
                            if (result.imgPath) {
                                $("#img1").html("<img src='" + ctx + result.imgPath + "' style='max-width: 600px'>")
                            }
                        } else {
                            if (result.msg) {
                                layer.alert(result.msg);
                            } else {
                                layer.alert("操作失败");
                            }
                        }
                    }
                })
            });
        })
    </script>
</body>
</html>